<template>
	<div>
		<head-top></head-top>
		<div class="boxWrap col-sm-12">			
			<div class="details_wrap">
				<!--删除成功-->
				<div class="alert alert-success alert-dismissable text-center" v-if="deleteSuccess">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
						&times;
					</button>
					{{successTip}}
				</div>
				<!--删除失败-->
				<div class="alert alert-danger alert-dismissable text-center" v-if="deleteError">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
						&times;
					</button>
					{{errorTip}}
				</div>
				<div class="col-sm-12">					
					<div class="col-sm-4 detail_left_btn">
						<p @click="toBuildStepPage(0)">
							<img src="../../assets/img/intelligent_modeling.png" alt="img" style="max-width:336px;height:140px;"/>
						</p>
						<p @click="dataBasicAnalysis()">
							<img src="../../assets/img/data_analysis.png" alt="img" style="max-width:336px;height:140px;padding:0;" 
							:disabled="details.creator!=this.$route.params.name" class="btn"/>
						</p>
						<span @click="toBuildStepPage(1)">手动建模</span>
						<span @click="toBuildStepPage(2)">数据预测</span>
						<!--<span @click="toBuildStepPage(3)">数据预处理</span>-->
					</div>
					<div class="col-sm-8 detail_right_info">
						<div class="clearfix data_operation">
							<h3 class="left detail_title">{{details.title}}</h3>
							<button class="right detail_delete btn" @click="deleteSureData()" :disabled="details.creator!=this.$route.params.name">删除数据</button>
							<button class="right detail_edit btn" @click="editData()" :disabled="details.creator!=this.$route.params.name">编辑数据信息</button>
							<!--<button class="right detail_buy btn" v-if="details.bought==1" disabled="disabled">已购买</button>
							<button class="right detail_buy btn" @click="buyData()" :disabled="details.creator==this.$route.params.name" v-else>购买模板</button>-->
						</div>
						<p class="data_by_someone text-left">
							<span>由</span><span>{{details.creator}}</span><span>于</span>
							<span>{{details.create_time}}</span><span>上传</span>
							<!--<span>{{details.price}}</span><span class="pai" v-if="details.price!=null">atoms</span>-->
						</p>
						<p class="detail_des text-left p_words" style="width:100%;">{{details.description}}</p>
						<div class="detail_status clearfix">
							<p class="col-sm-1"><span>{{details.line_number}}</span>行</p>
							<p class="col-sm-1"><span>{{details.column_number}}</span>列</p>
							<!--<p class="left"><span>{{details.selled}}</span>次购买</p>
							<p class="left" v-if="data_share">数据<span>分享</span></p>
							<p class="detail_upgrade_account left">升级账户</p>-->
						</div>
						<h4 class="text-left data_detail_table_name">数据概况</h4>
						<div :class="{'table_index_high':index_high}">			
							<table class="table table-striped table-hover table-bordered text-left detail_table" style="border:none;" >
			                    <thead>
			                        <tr class="tr_spe_style">
			                        	<th style="width:20%;border-bottom:0;">#</th>
			                            <th style="width:40%;border-bottom:0;">列名</th>
			                            <th style="width:40%;border-bottom:0;">
			                            	<span>显示类型</span>
			                            	<img src="../../assets/img/edit_data_img.svg" alt="img" @click="changeSelect()"  v-show="showSpan"
			                            		 v-if="details.creator==this.$route.params.name" class="change_img"/>
			                            	<p style="display:inline-block;" v-show="showSelect">
			                            		<img src="../../assets/img/edit_data_sure_img.svg" alt="img" @click="editSureType()" class="change_img"/>
			                            		<img src="../../assets/img/edit_data_cancel_img.svg" alt="img" @click="editCancelType()" class="change_img"/>
			                            	</p>
			                            </th>
			                        </tr>
			                    </thead>
			                    <tbody id="editable_sample_tbody" style="display:block;max-height:350px;overflow-y:scroll;">
			                    	<tr v-for="col_item in details.col_detail"  style="display:table;width:100%; table-layout:fixed;">
			                    		<td style="width:20%;">{{ col_item.index }}</td>
			                    		<td style="width:40%;">{{col_item.column_name}}</td>
			                    		<td style="width:40%;">
			                    			<p v-show="showSpan" v-if="col_item.display_type==0">数值型</p>
			                    			<p v-show="showSpan" v-else-if="col_item.display_type==1">类别型</p>
			                    			<p v-show="showSpan" v-else-if="col_item.display_type==2">其他</p>
			                    			<p v-show="showSelect">	                    				
				                    			<select name="data_type" :index="col_item.index">                  				
				                    				<option :value="0" v-if="col_item.display_type==0" selected>数值型</option>
											        <option :value="0" v-else>数值型</option>							        
											        <option :value="1" v-if="col_item.display_type==1" selected>类别型</option>
											        <option :value="1" v-else>类别型</option>
											        <option :value="2" v-if="col_item.display_type==2" selected>其他</option>
											        <option :value="2" v-else>其他</option>
				                    			</select>
			                    			</p>
			                    		</td>
			                    	</tr>
			                    </tbody>
			                </table>
						</div>
						<!--数据预览-->
						<div v-if="details.creator==this.$route.params.name">
							<h4 class="text-left data_detail_table_name">数据预览（前5行）</h4>
							<div  class="preview_of_data">							
								<table class="table table-striped table-hover table-bordered text-left">
				                    <thead>
				                        <tr>
				                        	<th v-for="header in details.preview_detail.headers">{{header}}</th>		                            
				                        </tr>
				                    </thead>
				                    <tbody>
				                    	<tr v-for="values in details.preview_detail.values">
				                    		<td v-for="value in values">{{ value }}</td>			                    		
				                    	</tr>
				                    </tbody>
				                </table>
							</div>
							<!--<reporter-table :table_header="details.preview_detail.headers" 
								:table_value="details.preview_detail.values">
							</reporter-table>-->
						</div>
					</div>
				</div>
			</div>
		</div>		
		<footerHtml></footerHtml>	
		<!--遮罩层-->
		<div id="mask" v-show="seen" :style="{height: relHeight}"></div>
		<img src="../../assets/img/loading.gif" alt="loading" class="loading_img" v-if="loading"/>
		<!--点击编辑的弹框-->
		<div class="bomb_box edit_box" v-show="seenEdit">			
			<p class="uploadName text-left" style="color: rgba(26,44,74,0.20);">{{uploadName}}</p>
			<p class="data_info_tip" v-if="seenEditTip">{{editTipMsg}}</p>
			<p class="text-left">
				<span class="data_info_name">数据名称</span>
				<input type="text" class="data_info_name_val editTitle" v-model="details.title" style="margin-left:-6px;"/>
			</p>
			<p class="text-left">
				<span class="data_info_name" style="display: block; float: left;">数据描述</span>
				<textarea name="des" class="data_info_des_val editDes" v-model="details.description"></textarea>
			</p>
			<p class="text-left">
				<span class="data_info_name">隐私性</span>
				<!--<span class="cursor data_info_public" @click="changeVisible0()" 
					style="margin-left: 12px;padding:6px 26px;border-radius:2px;" :class="{'change_visible':visibleTip1}">公开</span>-->
				<span class="cursor data_info_private" @click="changeVisible1()" 
					style="padding:6px 26px;margin-left:12px;border-radius:2px;" :class="{'change_visible':visibleTip2}">私有</span>
			</p>
			<p class="text-left" v-show="dataPrice">
				<span class="data_info_name">数据定价</span>
				<input type="number" class="data_info_pai_val editPrice" v-model="details.price" @blur="nonegativeNumber()"/>
				<span>atoms</span>
			</p>
			<p class="text-left" style="margin-left:94px;" v-show="dataPrice">
				<label class="input_label_beautify">				
			        <input class="input_radio" type="checkbox" name="agree_checkbox" checked>
			        <span class="input_checkbox input_radioInput"></span>我已同意数据共享协议
				</label>				
			</p>
			<p  class="text-right" style="margin-top:40px;">
				<button class="btn data_info_cancel" @click="bombBoxHide()">取消</button>
				<button class="btn data_edit_sure" @click="editSureData()" style="margin-left:40px;" :disabled="details.price<0">确定更改</button>
			</p>			
		</div>
	</div>
	
</template>

<script>
	//引入公共模块
	import headTop from '@/components/headTop'
	import footerHtml from '@/components/footerHtml'
	import reporterTable from '@/components/reporterTable'
	//api	
	import {urlEditData,urlDataDetail,urldeleteData} from '../../api/api'

export default {
    name: 'dataDetails',   
    data(){
    	return {
    		token:localStorage.getItem('token'),
    		username:localStorage.getItem('username'),
    		path:'',
    		data_id_param:'',
    		//控制可见的数据
    		seen:false,
    		loading:false,
    		relHeight:'',
  		    seenEdit:false,
    		seenEditTip:false,
    		bombTip:false,
    		seenBuy:false,
    		seenBuyTip:false,
    		deleteSuccess:false,
    		deleteError:false,
    		visibleTip1:false,
    		visibleTip2:false,
    		index_high:false,
    		dataPrice:false,
    		showSelect:false,
    		showSpan:true,
    		uploadName:'',
    		successTip:'成功',
    		errorTip:'抱歉！',
    		editTipMsg:'',
    		//编辑的数据 			
			editVis:0,
  			accountSurplus:'',
  			agreementVal:'',
    		//详情的数据
    		data_share:false,			
    		details:{
    			col_detail:'',
    			start:'',
				title:'',
				create_time:'',
				creator:'',
				description:'',
				line_number :'',
				column_number:'',
				price:'',
				selled:'',
				visible:'',
				balance:'',
				bought:'',
				preview_detail:''
    		}
    	
    	}
    },
    components:{
    	headTop,
    	footerHtml,
    	reporterTable
    },  
    beforeCreate:function(){
    		this.$nextTick(function () {
	      this.seen=true;
	      this.loading=true;
	    })
    },
    mounted(){
    	this.relHeight=`${document.documentElement.scrollHeight}px`;
		let	sendData={   		
	  		token:this.token,
	  		id:this.$route.params.id
    	};
	  	urlDataDetail(sendData).then(response => {
	  		this.seen=false;
	    	this.loading=false;
  			if(response.data.code==200){	  				
  				let resData=response.data.data;
	 			this.details.title=resData.title;
	    		this.details.create_time=resData.create_time;
	    		this.details.creator=resData.creator;
	    		this.details.description=resData.description;
	    		this.details.line_number=resData.line_number;
	    		this.details.column_number=resData.column_number;
	    		this.details.start=resData.start;
	    		this.details.price=resData.price;
	    		this.details.selled=resData.selled;
	    		this.details.visible=resData.visible;
	    		this.details.col_detail=resData.col_detail;
	    		this.details.preview_detail=resData.preview_detail;
//			    		console.log(resData.preview_detail.headers)
	    		if(resData.share==true){
	    			this.data_share=true;
	    		};
	    		if(this.details.visible==0){
	    			this.editVis=0;
	    			this.visibleTip1=true;
	    			this.dataPrice=true;
	    		}else if(this.details.visible==1){
	    			this.editVis=1;
	    			this.visibleTip2=true;
	    			this.dataPrice=false;			    			
	    		}
  			}else if(response.data.code!=200){
  				this.errorTip='获取数据失败';
  				this.deleteError=true;
  			}				    		
     	}).catch(error => {
     		if(error.response.data.code==401){
        		localStorage.clear();
        		this.$router.replace('/login');
			}
        });
    },
    methods: { 
    	changeSelect(){
    		this.relHeight=`${document.documentElement.scrollHeight}px`;
    		this.seen=true;
    		this.showSelect=true;
    		this.showSpan=false;
    		this.index_high=true;
    	},
    	editSureType(){   		
    		let preview_data=[];
				$("select[name='data_type']").each(function(){
					let dataDetail = {};												
					dataDetail['index'] = $(this).attr('index');
					dataDetail['display_type'] =$(this).val();
					preview_data.push(dataDetail)
				});	
				let sendData = {			        
			        id:this.$route.params.id,
		            preview_data:JSON.stringify(preview_data)
			  };		
	     		urlEditData(sendData).then(response => {
	     			if(response.data.code==200){
	     				this.seen=false;
			    		this.showSelect=false;
			    		this.showSpan=true;
			    		this.index_high=false;
	     				this.successTip='修改数据成功',
	     				this.deleteSuccess=true;
	     				let self=this;	     				
	     				setTimeout(function(){
	     					location.reload()
	     				}, 1000);    			
	     			}else{
	     				this.seen=false;
	     				this.showSelect=false;
			    		this.showSpan=true;
			    		this.index_high=false;
	     				this.successTip='修改数据失败',
	     				this.deleteError=true;
	     			}	    			
	         	}).catch(error => {
	           	    if(error.response.data.code==401){
	            		localStorage.clear();
	            		this.$router.replace('/login');
					}
	          	});
    		   		
    	},
    	editCancelType(){
    		this.seen=false;
    		this.showSelect=false;
    		this.showSpan=true;
    		this.index_high=false;
    	},
    	nonegativeNumber(){
    		if(this.details.price<0){
    			this.seenEditTip=true;
				this.editTipMsg='定价不得小于0 atoms';
			}else{
				this.seenEditTip=false;
			}
    	},
    	bombBoxHide(){
    		this.seen=false;
	    	this.seenEdit=false;
    	},
    	changeVisible0(){
    		$('.data_info_public').addClass('change_visible');
    		this.editVis=0;
    		this.dataPrice=true;
    		$('.data_info_private').removeClass('change_visible');
    	},
    	changeVisible1(){
    		$('.data_info_private').addClass('change_visible');
    		this.editVis=1;   		
    		this.dataPrice=false;
    		$('.data_info_public').removeClass('change_visible');
    	},
		editSureData(){
			//编辑数据请求
			if($('.editTitle').val() =='' ||  $('.editDes').val()==''){
				this.seenEditTip=true;
				this.editTipMsg='请检查输入信息';
				this.bombTip=true;
				return false;
			}else{
				if(this.editVis==0){
					if(this.details.price=='' || this.details.price==undefined){
	            		this.seenEditTip=true;
	            		this.editTipMsg='您还没有输入定价';
	            		this.bombTip=true;
	            		return false;
	            	}else{
	            		this.seen_tip=false;
	            		this.bombTip=false;
	            	}
				}
				this.seen=false;
				this.seenEdit=false;	
				let sendData = {			        
			        id:this.$route.params.id,
		            title:this.details.title,
		            description:this.details.description,
		            visible:this.editVis,
		            price:this.details.price,
			  };		
	     		urlEditData(sendData).then(response => {
	     			if(response.data.code==200){
	     				this.seen=false;
	     				this.seenEdit=false;
	     				this.successTip='修改数据成功',
	     				this.deleteSuccess=true;
	     				let self=this;	     				
	     				setTimeout(function(){
	     					location.reload()
	     				}, 1000);    			
	     			}else{
	     				this.seen=false;
	     				this.seenEdit=false;
	     				this.successTip='修改数据失败',
	     				this.deleteError=true;
	     			}
	     					
	         	}).catch(error => {
	           	    if(error.response.data.code==401){
	            		localStorage.clear();
	            		this.$router.replace('/login');
					}
	          	});
			}
				
  		},
		editData(){
			this.relHeight=`${document.documentElement.scrollHeight}px`;
			this.seen=true;	
			this.seenEdit=true;	
		},
		deleteSureData(){	
			this.seen=true;	
  			//删除数据请求		
     		urldeleteData({id:this.$route.params.id}).then(response => {
     			if(response.status==200){
     				this.seen=false;
     				this.successTip='删除数据成功';
     				this.deleteSuccess=true; 
     				let self=this;
     				setTimeout(function(){
     					self.$router.push('/dashboard')
     				}, 2000);
     				
     			}else if(response.status==201){ 
     				this.errorTip='删除数据失败';
	  				this.deleteError=true;
     			}		
         	}).catch(error => {
           	    console.log('error')
          	});
		},
		buyTemplate(){ 
    		if(this.templateDetail.balance<this.templateDetail.price){
    			this.errorTip='余额不足',
		 		this.error=true;
    		}else{   			   		
		    	let sendData={
					data_id:this.$route.params.id
				};
		 		urlBuyData(sendData).then(response => {
		 			if(response.data.code==200){
		 				this.seen=false;
						this.editTemplate=false;
		 				this.successTip='购买成功',
		 				this.success=true;   			
		 			}else{
		 				this.seen=false;
		 				this.editTemplate=false;
		 				this.errorTip=response.data.message;
		 				this.error=true;
		 			}	 					
		     	}).catch(error => {
		       	   if(error.response.data.code==401){
	            		localStorage.clear();
	            		this.$router.replace('/login');
					}
		      	});
		    }
    	},
    	dataBasicAnalysis(){
    		if(this.details.creator==this.$route.params.name){  			
    			this.$router.push({name:'dataBasicAnalysis',params: {id:this.$route.params.id,node:-1}})
    		}
    	},
		toBuildStepPage(path){
			this.path=path;
			//如果this.path==1,0的时候是智能建模，1的时候是手动建模，2的时候是数据预测，3的时候是数据预处理，
			if(this.path==0){
				this.$router.push({name:'task',params: {id:this.$route.params.id}})
			}else if(this.path==1){
				this.$router.push({name:'buildStep',params: {key:this.$route.params.id,tem:-1,model:-1,path:-1}});
			}else if(this.path==2){
				this.$router.push({name:'buildStep',params: {key: this.$route.params.id,tem:-1,model:-1,path:-2}});
			}
		}
  	},
  	created(){

  	}
}
</script>


<style lang="css">
	@import "../../assets/css/base.css"
</style>
<style lang="css">
	@import "../../assets/css/data_details.css"
</style>
<style lang="css">
	@import "../../assets/css/data_info.css"
</style>